<script setup lang="ts">
import { computed } from 'vue'
import { ElCard, ElImage, ElTag, ElButton, ElSpace, ElIcon } from 'element-plus'
import { VideoPlay, Edit, Delete, Share, View } from '@element-plus/icons-vue'
import type { ContentItem } from '@/types'

interface Props {
  content: ContentItem
}

const props = defineProps<Props>()

const emit = defineEmits<{
  edit: [content: ContentItem]
  delete: [content: ContentItem]
  share: [content: ContentItem]
  publish: [content: ContentItem]
}>()

// const showPreview = ref(false) // TODO: 实现预览功能

const statusColor = computed(() => {
  switch (props.content.status) {
    case 'published':
      return 'success'
    case 'draft':
      return 'info'
    case 'scheduled':
      return 'warning'
    case 'failed':
      return 'danger'
    default:
      return 'info'
  }
})

const statusText = computed(() => {
  const statusMap = {
    draft: '草稿',
    scheduled: '已计划',
    published: '已发布',
    failed: '发布失败'
  }
  return statusMap[props.content.status] || '未知'
})

const mediaType = computed(() => {
  if (!props.content.mediaUrls?.length) return 'text'
  const url = props.content.mediaUrls[0]
  if (url.includes('.mp4') || url.includes('.mov')) return 'video'
  return 'image'
})

const previewImage = computed(() => {
  if (props.content.mediaUrls?.length) {
    return props.content.mediaUrls[0]
  }
  return null
})

const truncatedText = computed(() => {
  if (props.content.text && props.content.text.length > 100) {
    return props.content.text.substring(0, 100) + '...'
  }
  return props.content.text || ''
})
</script>

<template>
  <ElCard class="content-preview" shadow="hover">
    <template #header>
      <div class="card-header">
        <div class="content-info">
          <span class="content-title">{{ content.title || '无标题' }}</span>
          <ElTag :type="statusColor" size="small">
            {{ statusText }}
          </ElTag>
        </div>
        <div class="content-meta">
          <span class="content-platform">{{ content.platform.toUpperCase() }}</span>
        </div>
      </div>
    </template>

    <div class="content-body">
      <div v-if="previewImage" class="media-preview">
        <ElImage
          :src="previewImage"
          :preview-src-list="content.mediaUrls"
          fit="cover"
          class="preview-image"
          :hide-on-click-modal="true"
        >
          <template #error>
            <div class="image-error">
              <ElIcon><View /></ElIcon>
              <span>媒体加载失败</span>
            </div>
          </template>
        </ElImage>
        
        <div v-if="mediaType === 'video'" class="video-indicator">
          <ElIcon><VideoPlay /></ElIcon>
        </div>
        
        <div v-if="content.mediaUrls && content.mediaUrls.length > 1" class="media-count">
          +{{ content.mediaUrls.length - 1 }}
        </div>
      </div>

      <div class="content-text">
        <p>{{ truncatedText }}</p>
      </div>

      <div v-if="content.tags?.length" class="content-tags">
        <ElTag
          v-for="tag in content.tags.slice(0, 3)"
          :key="tag"
          size="small"
          type="info"
          effect="plain"
        >
          #{{ tag }}
        </ElTag>
        <span v-if="content.tags.length > 3" class="more-tags">
          +{{ content.tags.length - 3 }}
        </span>
      </div>

      <div class="content-meta-info">
        <div v-if="content.scheduledAt" class="meta-item">
          <strong>计划发布:</strong> {{ new Date(content.scheduledAt).toLocaleString() }}
        </div>
        <div v-if="content.publishedAt" class="meta-item">
          <strong>发布时间:</strong> {{ new Date(content.publishedAt).toLocaleString() }}
        </div>
        <div v-if="content.createdAt" class="meta-item">
          <strong>创建时间:</strong> {{ new Date(content.createdAt).toLocaleString() }}
        </div>
      </div>

      <div class="content-actions">
        <ElSpace>
          <ElButton
            type="primary"
            size="small"
            :icon="VideoPlay"
            :disabled="content.status === 'published'"
            @click="emit('publish', content)"
          >
            {{ content.status === 'scheduled' ? '立即发布' : '发布' }}
          </ElButton>
          
          <ElButton
            type="warning"
            size="small"
            :icon="Edit"
            @click="emit('edit', content)"
          >
            编辑
          </ElButton>
          
          <ElButton
            type="success"
            size="small"
            :icon="Share"
            :disabled="content.status !== 'published'"
            @click="emit('share', content)"
          >
            分享
          </ElButton>
          
          <ElButton
            type="danger"
            size="small"
            :icon="Delete"
            @click="emit('delete', content)"
          >
            删除
          </ElButton>
        </ElSpace>
      </div>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.content-preview {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    .content-info {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      
      .content-title {
        font-weight: 600;
        font-size: 14px;
        color: var(--el-text-color-primary);
        line-height: 1.4;
      }
    }
    
    .content-meta {
      .content-platform {
        font-size: 12px;
        color: var(--el-text-color-secondary);
        font-weight: 500;
      }
    }
  }
  
  .content-body {
    .media-preview {
      position: relative;
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
      
      .preview-image {
        width: 100%;
        height: 200px;
        border-radius: 8px;
        
        .image-error {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 200px;
          background: var(--el-fill-color-light);
          color: var(--el-text-color-placeholder);
          gap: 8px;
        }
      }
      
      .video-indicator {
        position: absolute;
        top: 8px;
        left: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      
      .media-count {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }
    }
    
    .content-text {
      margin-bottom: 12px;
      
      p {
        margin: 0;
        line-height: 1.5;
        color: var(--el-text-color-regular);
        font-size: 14px;
      }
    }
    
    .content-tags {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
      
      .more-tags {
        font-size: 12px;
        color: var(--el-text-color-placeholder);
      }
    }
    
    .content-meta-info {
      margin-bottom: 16px;
      
      .meta-item {
        margin-bottom: 4px;
        font-size: 12px;
        color: var(--el-text-color-regular);
        
        strong {
          color: var(--el-text-color-primary);
        }
      }
    }
    
    .content-actions {
      display: flex;
      justify-content: center;
    }
  }
}

@media (max-width: 768px) {
  .content-preview {
    .card-header {
      flex-direction: column;
      gap: 8px;
    }
    
    .content-body {
      .media-preview .preview-image {
        height: 150px;
      }
      
      .content-actions {
        justify-content: stretch;
        
        .el-space {
          width: 100%;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 8px !important;
          
          .el-button {
            flex: 1;
            min-width: 60px;
          }
        }
      }
    }
  }
}
</style>